<template>
	<view>
		<!-- Tabs -->
		<view class="tabs">
			<view class="tab" :class="{ active: activeTab === 'details' }" @click="activeTab = 'details'">
				明细
			</view>
			<view class="tab" :class="{ active: activeTab === 'settings' }" @click="activeTab = 'settings'">
				设置
			</view>
		</view>

		<view class="transaction-details">
			<!-- Tab Content -->
			<view v-if="activeTab === 'details'" class="transaction-list">
				<!-- Transaction List -->
				<view v-if="vouchers.length > 0">
					<view class="transaction-item" v-for="(voucher, index) in vouchers" :key="index">
						<view class="row">
							<text class="label">所属会员：</text>
							<text class="value">{{ voucher.user.nickname }}</text>
						</view>
						<view class="row">
							<text class="label">卡券名称：</text>
							<text class="value">{{ voucher.name }}</text>
						</view>
						<view class="row">
							<text class="label">到期时间：</text>
							<text class="value">{{ voucher.endtime_text }}</text>
						</view>
						<view class="row">
							<text class="label">卡券状态：</text>
							<text class="value" :class="{'used': voucher.status === '1'}">
								{{ voucher.status == 1 ? "已使用" : "未使用" }}
							</text>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="no-records">
						<text>暂无卡券记录</text>
					</view>
				</view>
			</view>

			<view v-if="activeTab === 'settings'" class="transaction-list">
				<!-- Settings Content -->
				<view v-if="coupons.length > 0">
					<view class="transaction-item" v-for="(coupon, index) in coupons" :key="index">
						<view class="row">
							<text class="label">优惠券名称：</text>
							<text class="value">{{ coupon.name }}</text>
						</view>
						<view class="row">
							<text class="label">优惠券类型：</text>
							<text class="value">{{ coupon.type == 'reward' ? '满减' : '折扣' }}</text>
						</view>
						<view class="row">
							<text class="label">允许直接领取：</text>
							<text class="value">{{ coupon.isshow == 1 ? '是' : '否' }}</text>
						</view>
						<view class="row">
							<text class="label">发放数量：</text>
							<text class="value">{{ coupon.count }}</text>
						</view>
						<view class="row">
							<text class="label">已领取数量：</text>
							<text class="value">{{ coupon.leadcount }}</text>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="no-records">
						<text>暂无优惠券信息</text>
					</view>
				</view>
			</view>

			<!-- Buttons -->
			<view class="container" v-if="activeTab === 'details'">
				<view class="add-button-container">
					<view class="add-button" @click="openPopup">赠送会员</view>
				</view>
			</view>
			<view class="container" v-else>
				<view class="add-button-container">
					<view class="add-button" @click="openSetting">添加优惠券</view>
				</view>
			</view>
		</view>

		<!-- 弹窗组件 -->
		<coupon-popup :selectedCouponName="selectedCouponName" :couponNames="couponNames" :show.sync="isPopupVisible"
			@grant="handleGrant" @close="closePopup" @confirm="handleAddSuccess" @refreshData="handleRefreshData" />
		<coupon-settings :show.sync="isSettingVisible" @close="closeSetting" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import CouponPopup from './components/couponPopup.vue';
	import CouponSettings from './components/couponSettings.vue';

	export default {
		components: {
			CouponPopup,
			CouponSettings
		},
		computed: {
			...mapState(['common']),
			storeId() {
				return this.common.appConfig.store_id;
			}
		},
		data() {
			return {
				isSettingVisible: false,
				couponNames: [],
				selectedCouponName: '',
				isPopupVisible: false,
				activeTab: 'details', // Active tab state
				vouchers: [],
				coupons: []
			};
		},
		onLoad() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			this.loadCoupon();
			this.loadUserCoupon();
		},
		methods: {
			// 打开和关闭弹窗逻辑
			openPopup() {
				this.isPopupVisible = true;
			},
			closePopup() {
				this.isPopupVisible = false;
				this.loadCoupon(); // 关闭弹窗后重新加载优惠券列表
				this.loadUserCoupon(); // 关闭弹窗后重新加载会员优惠券列表
			},
			openSetting() {
				this.isSettingVisible = true;
			},
			closeSetting() {
				this.isSettingVisible = false;
				this.loadCoupon(); // 关闭设置弹窗后重新加载优惠券列表
			},
			// 赠送会员
			handleGrant(grantData) {
				console.log('赠送会员:', grantData);
				// 处理赠送逻辑
			},
			// 添加成功后的逻辑
			handleAddSuccess() {
				this.closePopup(); // 关闭弹窗
			},
			// 处理刷新数据的逻辑
			handleRefreshData() {
				console.log("刷新数据");

				// 调用接口重新加载优惠券列表和会员优惠券列表
				this.loadCoupon();
				this.loadUserCoupon();
			},
			// 加载优惠券列表
			loadCoupon() {
				this.$xyfun.userStoreId().then((store_id) => {
					this.$api.post({
						url: '/Coupon/CouponLists',
						loadingTip: '加载中...',
						data: {
							store_id: store_id
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.isLoading = false;
							this.coupons = res.data;
							// 获取接口返回的数据
							const couponData = res.data;

							// 映射数据为需要的格式
							this.couponNames = couponData.map(coupon => ({
								id: coupon.id,
								name: coupon.name
							}));
							// 你可以在这里输出检查数据
							console.log(this.couponNames);
						}
					});
				});
			},
			// 加载会员优惠券列表
			loadUserCoupon() {
				this.$xyfun.userStoreId().then((store_id) => {
					this.$api.post({
						url: '/Coupon/UserCouponLists',
						loadingTip: '加载中...',
						data: {
							store_id: store_id
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.isLoading = false;
							this.vouchers = res.data;
						}
					});
				});
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.icon {
		color: #000;
		width: 44rpx;
		/* Adjust size of the icon */
		height: 44rpx;
		margin-left: 10px;
		margin-top: 10px;
		/* Space between icon and the start of the row */
	}

	.add-button-container {
		position: fixed;
		/* Stays in place at the bottom */
		bottom: 20px;
		/* 20px from the bottom */
		display: flex;
		/* Flexbox layout */
		justify-content: center;
		/* Center horizontally */
		align-items: center;
		/* Align center vertically */
		/* z-index: 10; */
		/* Ensure it appears above other elements */
	}

	.add-button {
		width: 690rpx;
		/* Button width */
		height: 95rpx;
		/* Button height */
		line-height: 95rpx;
		/* Vertically center text inside the button */
		background-color: #65C61D;
		/* Green background color */
		color: #fff;
		/* White text color */
		font-size: 36rpx;
		/* Font size for button text */
		border-radius: 20rpx;
		/* Rounded corners */
		text-align: center;
		/* Center text horizontally */
		cursor: pointer;
		/* Indicate clickability */
	}

	.transaction-details {
		padding: 10px;
		background-color: #f5f5f5;
		height: 100vh;
	}

	.tabs {
		display: flex;
		/* border-bottom: 1px solid #ccc; */
		margin-bottom: 10px;
		background-color: #fff;
		/* Set background color for the tabs */
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 10px;
		font-size: 16px;
		color: #666;
	}

	.tab.active {
		color: #007aff;
		font-weight: bold;
		border-bottom: 1px solid #007aff;
		/* Adjusted border-bottom to be shorter */
		width: 113rpx;
		/* Shortened the width of the active tab's border */
	}

	.no-records {
		text-align: center;
		padding: 50rpx;
		color: #999;
		font-size: 18px;
		background-color: #f9f9f9;
		border-radius: 10px;
		border: 1px dashed #ddd;
		margin-top: 30rpx;
	}

	.transaction-list {
		/* background-color: #fff; */
		padding: 10px;
		border-radius: 8px;
	}

	.transaction-item {
		margin-bottom: 23rpx;
		/* Add spacing between items */
		background-color: #fff;
		/* Optional: Light background color for each block */
		border: 1px solid #eee;
		/* Optional: Light border for separation */
		border-radius: 8px;
		/* Optional: Rounded corners for blocks */
		padding: 15px;
		/* Padding inside each block */
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		/* Optional: Subtle shadow for better distinction */
	}

	.transaction-item:last-child {
		margin-bottom: 0;
		/* Remove spacing after the last item */
	}

	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.label {
		font-size: 16px;
		color: #666;
	}

	.value {
		font-size: 16px;
		color: #333;
		flex: 1;
		text-align: right;
		/* Ensure values align to the right */
	}


	.arrow {
		font-size: 18px;
		color: #999;
		margin-left: 10px;
	}

	.photo-upload {
		width: 50px;
		height: 50px;
		border: 1px dashed #ccc;
		border-radius: 4px;
		text-align: center;
		line-height: 50px;
		font-size: 24px;
		color: #999;
	}

	.description-input {
		width: 100%;
		height: 100px;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 10px;
		font-size: 14px;
		color: #333;
	}
</style>
